<template>
    <div class="box">
        <!-- 导航栏 -->
        <navList title="购物车"></navList>

        <div v-if="shopCar.length > 0">
            <van-swipe-cell v-for="(v, i) in shopCar" :key="i">
                <van-card :price="v.goods_price" :title="v.goods_name" class="goods-card">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked"></van-checkbox>
                            <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                alt="" style="width: 6rem;height: 6rem;margin-left: 0.2rem;">
                        </div>
                    </template>
                    <template #footer>
                        <van-stepper v-model="v.num" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" @click="delFun(i)" type="danger" class="delete-button" />
                </template>

            </van-swipe-cell>
            <div style="height: 12rem;"></div>
            <van-submit-bar :price="priceAll" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checkedAll" @click="isCheckedAll()">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <div v-else><van-empty description="暂无购物车数据" /></div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue"

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import navList from "@/components/navList.vue"

import { useCounterStore } from '@/stores/counter'

import { createApi } from "@/api/api"

// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

let shopCar = ref(store.shopList)
// console.log(shopCar.value)

// 购物车的删除
const delFun = (i) => {
    shopCar.value.splice(i, 1)
}

// 购物车的全选
const checkedAll = computed(() => {
    return shopCar.value.every((v) => v.checked)
})

// 全选和反选
const isCheckedAll = (() => {
    let flag = !checkedAll.value
    shopCar.value.forEach((v) => {
        v.checked = flag
    })
})

// 小计
const priceAll = computed(() => {
    let sum = 0
    shopCar.value.forEach((v) => {
        if (v.checked) {
            sum += v.num * v.goods_price * 100
        }
    })
    return sum
})

import { showToast } from 'vant';

import _ from "lodash"

const onSubmit = _.debounce(
    () => {
        if (shopCar.length > 0) {
            let newShopCar = shopCar.value.filter((v) => v.checked)
            let obj = {
                goodsIds: newShopCar.map((v) => v.goods_id).join(),
                username: localStorage.getItem("username"),
                product_code: newShopCar.map((v) => v.goods_name.slice(0, 10)).join(),
                totalPrice: priceAll.value,
                nums: newShopCar.map((v) => v.num).join()
            }
            createApi(obj).then((res) => {
                console.log(res)
                if (res.data.code == 0) {
                    router.push({ path: '/order', query: { orderId: res.data.data.orderId } })
                }
            })
        } else {
            showToast("请选择商品");
        }
    }, 200)

const onClickLink = () => showToast('修改地址');

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }

    .van-submit-bar {
        bottom: 5rem;
    }
}
</style>